<template>
  <div class="header">
    <el-menu :default-active="activeIndex"
             active-text-color='#1e80ff'
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect"
             text-color='#515767'
             background-color='#ffffff'>
      <el-menu-item index="0"
                    class="item"> <img
             src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
             alt="稀土掘金">
      </el-menu-item>

      <el-menu-item index="1"
                    class="item">首页</el-menu-item>
      <el-menu-item index="2"
                    class="item">沸点</el-menu-item>
      <el-menu-item index="3"
                    class="item">课程</el-menu-item>
      <el-menu-item index="4"
                    class="item">直播</el-menu-item>
      <el-menu-item index="5"
                    class="item">活动</el-menu-item>
      <el-menu-item index="6"
                    class="item">竞赛</el-menu-item>
      <el-menu-item index="7"
                    class="item">商城</el-menu-item>
      <el-menu-item index="8"
                    class="item">APP</el-menu-item>
      <el-menu-item index="9"
                    class="item">插件</el-menu-item>
      <el-menu-item index="10"
                    class="item">
        <el-input v-model="searchValue"
                  placeholder="探索泥土挖银"
                  @keyup.enter.native='search()'></el-input>
      </el-menu-item>
      <el-menu-item index='11'
                    class="item">
        <el-dropdown split-button
                     type="primary"
                     @click="handleClick">
          创作中心
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>写文章</el-dropdown-item>
            <el-dropdown-item>发沸点</el-dropdown-item>
            <el-dropdown-item>写笔记</el-dropdown-item>
            <el-dropdown-item>写代码</el-dropdown-item>
            <el-dropdown-item>草稿箱</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
      <el-menu-item index="12">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <i class="el-icon-message-solid"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item class="clearfix">
              评论
              <el-badge class="mark"
                        :value="12" />
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              赞与收藏
              <el-badge class="mark"
                        :value="3" />
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              新增粉丝
              <el-badge class="mark"
                        :value="3" />
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              私信
              <el-badge class="mark"
                        :value="3" />
            </el-dropdown-item>
            <el-dropdown-item class="clearfix">
              系统通知
              <el-badge class="mark"
                        :value="3" />
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>

      <el-menu-item index='13'>
        <el-button v-if="user==null"
                   class="loginButton"
                   @click="toLogin">登录 | 注册</el-button>

        <el-dropdown v-else>
          <div class="block">
            <el-avatar :size="40"
                       :src="circleUrl"></el-avatar>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
    <!-- <el-dialog :visible.sync="dialogVisible"   :modal-append-to-body="false" class="loginDialog">
      <el-form :label-position="labelPosition"
               label-width="100px"
               size="small"
               :model="formLabelAlign" class="loginForm">
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-input v-model="formLabelAlign.region"></el-input>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input v-model="formLabelAlign.type"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </div>
</template>

<script>
import user from "@/api/user";
import token from "@/utils/token";

export default {
  data() {
    return {
      user: this.$route.params.user,
      activeIndex: "1",
      searchValue: "",
      circleUrl: "/static/avatar.jpg",
      // dialogVisible: false,
      // formLabelAlign:{}
    };
  },
  methods: {
    toLogin() {
      this.$router.push("toLogin");
    },
    logout() {
      user
        .logout(token.getToken())
        .then((result) => {
         this.$router.go(0)
        })
        .catch((err) => {});
    },
    // showModal() {
    //   this.dialogVisible = true;
    // },
    handleSelect(key, keyPath) {},
    search() {
      this.$bus.$emit("updateData", this.searchValue, 2);
    },
    handleClick() {},
    open() {
      this.$prompt("请输入邮箱", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
};
</script>

<style scoped>
.loginButton {
  color: #3398ff;
  border-color: #b3d5ff;
}
.header {
  position: fixed;
  top: 0;
  z-index: 1;
}
.item {
}
.el-menu-item:hover {
  background-color: white !important;
  color: black !important;
}
</style>